<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="6">
            <a-form-item label="">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField" :dropdownMatchSelectWidth="false">
                  <a-select-option value="twoTypeName"> 二级分类 </a-select-option>
                  <a-select-option value="mainDeptName"> 主导经营体 </a-select-option>
                </a-select>
                <a-input-search
                  style="width: 78%"
                  v-model="queryParam.keyword"
                  @search="searchQuery"
                  placeholder="请按照关键字进行搜索"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="查询年份">
             <a-select v-model="queryParam.searchYear"  placeholder="请选择"  @change="yearChange">
                <a-select-option :value="item.code" v-for="item in yearList" :key="item.code"> {{item.label}} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="查询月份">
            <a-select v-model="queryParam.currMonth" placeholder="请选择" :options="monthOptions" @change="monthChange">
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <!-- <a-button type="primary" @click="showSearchForm=true" icon="search">高级查询</a-button> -->
              <a-button type="primary" @click="handlePostExportXls('进度汇总及排名报表')" icon="download"
                >导出</a-button
              >
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 10px">重置</a-button>
              <a-button type="primary" @click="clickModal" icon="search" style="margin-left: 8px" v-has="'projectSubType:permission:MA'">填入挖潜预算目标</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>

      <!-- <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="审批状态">
                <a-select v-model="queryParam.status">
                  <a-select-option value="1"> 创建中 </a-select-option>
                  <a-select-option value="2"> 审批中 </a-select-option>
                  <a-select-option value="3"> 审批完成 </a-select-option>
                  <a-select-option value="4"> 不同意 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="变更单号">
                <a-input v-model="queryParam.projectChangeNo" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目号">
                <a-input v-model="queryParam.projectNo" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目名称">
                <a-input v-model="queryParam.projectName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目经理">
                <a-input v-model="queryParam.projectManagerUserName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="主要责任人">
                <a-input v-model="queryParam.dutyUserName" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal> -->

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="showSearchForm = false"
        :key="keyModal"
      >
        <ma-excel></ma-excel>
      </a-modal>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator"></div>
    <span>单位：万元</span>
    <div class="container">
      <a-table
        ref="table"
        bordered
        size="middle"
        :scroll="{ x: true }"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="changeReason" slot-scope="text, record">
          <span :title="record.changeReason">{{ showLength(record.changeReason, 15) }}</span>
        </template>
      </a-table>
    </div>
  </a-card>
</template>


<script>
import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
import { filterHasPermission } from '@/utils/hasPermission'
export default {
  name: 'maSummaryOneIndex',
  mixins: [JeecgListMixin],
  components: {
    MaExcel: () => import('@/components/tools/MaExcel'),
  },
  data() {
    return {
      description: '进度汇总及排名报表',
      /* 勾选导出参数 */
      rowKey: 'id',
      busType: 'maSummaryOneIndex',
      columns: [
        {
          title: '二级分类',
          align: 'center',
          width: '100px',
          dataIndex: 'twoTypeName',
          sorter: (a, b) => a.twoTypeName - b.twoTypeName,
          customRender: (text, row, index) => {
            return {
              children: <span>{text}</span>,
              attrs: {
                rowSpan: row.twoTypeNameRowSpan, //需要合并的数据
              },
            }
          },
        },
        {
          title: '主导经营体',
          align: 'center',
          width: '100px',
          dataIndex: 'mainDeptName',
        },
        {
          title: '挖潜预算目标',
          align: 'center',
          width: '80px',
          dataIndex: 'budgetTarget',
        },
        {
          title: '挖潜提报目标',
          align: 'center',
          width: '80px',
          dataIndex: 'powerTarget',
        },
        {
          title: '累计收益',
          align: 'center',
          width: '80px',
          dataIndex: 'totalIncome',
        },
        {
          title: '收益完成率',
          align: 'center',
          width: '80px',
          dataIndex: 'incomeRateStr',
        },
        {
          title: '当月收益',
          align: 'center',
          width: '80px',
          dataIndex: 'monthlyIncome',
        },
        {
          title: '当月完成率',
          align: 'center',
          width: '80px',
          dataIndex: 'completionReteStr',
        },
        {
          title: '环比变动',
          align: 'center',
          width: '80px',
          dataIndex: 'monthChange',
        },
      ],
      url: {
        list: '/projectBuild/maSummaryOne',
        exportXlsUrl: '/projectBuild/maSummaryOneExport',
      },
      showSearchForm: false,
      keyword: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      queryParam: {
        searchField: 'twoTypeName',
        searchYear: parseInt(String(new Date().getFullYear()))
      },
      keyModal: 1,
      monthOptions:[],
      yearList: []
    }
  },
  created(){
    // 设置当前年份
    const year = String(new Date().getFullYear())
    const lastNum = year.slice(year.length-1,year.length)  
    this.yearList = []              
    for(var i = lastNum; i >= 0; i--){
      this.yearList.push({label: `202${i}年`,code: parseInt(`202${i}`)})
    }
    this.$set(this.queryParam,'searchYear',parseInt(year))
  },
  mounted() {
    if (filterHasPermission('projectSubType:permission:MA')) {
      this.columns.push({
        title: '累计排名',
        align: 'center',
        width: '80px',
        dataIndex: 'totalRank',
      })

      this.columns.push({
        title: '当月排名',
        align: 'center',
        width: '80px',
        dataIndex: 'monthRank',
      })
    }
    this.initMonthOptions()
  },
  computed: {},
  methods: {
    monthChange(val) {
     let lastMonth =  Number(val) -1
     this.$set(this.queryParam,'lastMonth',lastMonth)
     this.searchQuery()
    },
    yearChange() {
      this.searchQuery()
    },
    initMonthOptions() {
      for (let index = 1; index < 13; index++) {
        let obj = {value:index,label:index+'月'}
        this.monthOptions.push(obj)
      }
    },
    clickModal() {
      this.showSearchForm = true
      this.keyModal = this.keyModal + 1
    },
    handleToSearch() {
      this.showSearchForm = false
      this.searchQuery()
    },
    searchReset() {
      this.queryParam = {}
      this.queryParam.searchField = 'twoTypeName'
      this.handleToSearch()
    },
    showLength(item, len) {
      if (!item || item.length <= len) {
        return item
      }
      return item.substring(0, len) + '...'
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
@media (max-width: 1170px) {
  .page-main .container section .list-content > div.flex-num1-box {
    flex-wrap: wrap;
    > div {
      &:nth-child(1),
      &:nth-child(2) {
        width: 48%;
      }
      &:nth-child(3) {
        width: 100%;
        justify-content: flex-start;
        > span {
          margin-right: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .page-main .container section .list-content > div.flex-num2-box {
    display: block;
    margin-top: 0;
  }
}
</style>